<template>
  <div class="detail_container">
    <div class="detail_basic_info">
      <!--{{details}}-->
      <p class="detail_basic">基本信息</p>
      <p class="detail_item">
        <span class="item_info">
          <span>病历号：</span>
          <span>{{userId}}</span>
        </span>
        <span class="item_info">
          <span>姓名：</span>
          <span>{{userName}}</span>
        </span>
        <!--<span class="item_info">-->
        <!--<span>电话：</span>-->
        <!--<span>15588886666</span>-->
        <!--</span>-->
      </p>
      <!--<p class="detail_item">-->
      <!--<span class="item_info">-->
      <!--<span>性别：</span>-->
      <!--<span>女</span>-->
      <!--</span>-->
      <!--<span class="item_info">-->
      <!--<span>年龄：</span>-->
      <!--<span>45</span>-->
      <!--</span>-->
      <!--<span class="item_info">-->
      <!--<span>民族：</span>-->
      <!--<span>汉</span>-->
      <!--</span>-->
      <!--</p>-->
      <!--<p class="detail_item">-->
      <!--<span class="item_info">-->
      <!--<span>身份证号：</span>-->
      <!--<span>430424197301012315</span>-->
      <!--</span>-->
      <!--<span class="item_info">-->
      <!--<span>住址：</span>-->
      <!--<span>湖南长沙</span>-->
      <!--</span>-->
      <!--</p>-->
      <!--<p class="detail_item">-->
      <!--<span class="item_info">-->
      <!--<span>左眼视力：</span>-->
      <!--<span>4.8</span>-->
      <!--</span>-->
      <!--<span class="item_info">-->
      <!--<span>右眼视力：</span>-->
      <!--<span>4.9</span>-->
      <!--</span>-->
      <!--</p>-->
    </div>

    <div style="border-bottom: 1px dashed rgb(209,209,209);margin-bottom: 20px">
      <p class="detail_basic">眼底图像</p>
      <p class="detail_img"><img :src="origin" alt="" style="width: 100%;"></p>
    </div>

    <div class="detail_img_result">
      <!--<div><img src="../../assets/image/5.jpg" alt=""></div>-->
      <div class="detail_img_info">
        <p class="detail_img_feature">眼底特征</p>
        <div class="detail_item_container">
          <!--<p class="title">杯盘检测</p>-->
          <!--<p class="detail_img_item">-->
            <!--<span class="one">杯盘比</span>-->
            <!--<span class="two">{{isdr}}</span>-->
            <!--&lt;!&ndash;<span class="one">下颧间距  血管分割图  微动脉瘤检测（个数） 视盘定位图 </span>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="two">0</span>&ndash;&gt;-->
          <!--</p>-->
          <!--<p class="detail_img_item">-->
          <!--<span class="one">鼻间距</span>-->
          <!--<span class="two">0</span>-->
          <!--<span class="one">颧间距</span>-->
          <!--<span class="two">0</span>-->
          </p>
        </div>

        <div class="detail_item_container">
          <p class="title">微动脉瘤</p>
          <p class="detail_img_item">
            <span class="one">个数</span>
            <span class="two">{{masNum}}</span>
            <!--<span class="one">下颧间距</span>-->
            <!--<span class="two">0</span>-->
          </p>
          <p class="detail_img_item">
            <!--<span class="one">鼻间距</span>-->
            <!--<span class="two">0</span>-->
            <!--<span class="one">颧间距</span>-->
            <!--<span class="two">0</span>-->
          </p>
        </div>
      </div>
    </div>

    <div class="detail_conclusion">
      <p>机器诊断结果：{{isdr==1?'有可能患有糖网病':'无糖网病'}}</p>
    </div>

    <div class="detail_images">
      <span style="margin: auto">
        <img :src="vesselImg" alt="">
        <em style="font-style: normal">血管分割图</em>
      </span>
      <span style="margin: auto">
        <img :src="massvesselImg" alt="">
        <em style="font-style: normal">微动脉瘤检测</em>
      </span>
      <span>
      <img :src="odlocation" alt="">
      <em style="font-style: normal">视盘定位图</em>
      </span>
    </div>

    <!--<div>-->
      <!--<img :src="imgUrl" alt="" style="width: 500px;">-->
      <!--<em>{{result}}</em>-->
    <!--</div>-->


    <!--<textarea name="" id="" cols="30" rows="10" class="add_detail" v-model="added_detail"></textarea>-->
    <!--<div class="submit_detail"><button @click="submit(added_detail)">提交</button></div>-->
  </div>
</template>

<script>
  import axios from 'axios';
  import {apiPre} from "../../assets/js/config";
  import event from '../main/component/event';

  export default {
    name: "detail",
    data() {
      return {
        details: window.location.href.split('/').pop(),
        added_detail: '',
        imgUrl: '',
        result: '',
        userId: '',
        userName: '',
        // vesselImg: require('../../assets/image/666_vessel.png'),
        vesselImg: '',
        // massvesselImg: require('../../assets/image/666_maslabels.jpg'),
        massvesselImg: '',
        // origin: require('../../assets/image/4.jpg'),
        origin: '',
        odlocation: '',
        isdr: 0,
        masNum: 0
      }
    },
    created: function () {
      // alert(window.location);
      console.log('window.location', window.location);
      console.log('this.$route', this.$route.params)
    },
    methods: {
      submit(msg) {
        console.log(msg);
        window.close();
      }
    },
    mounted() {

      axios.get(apiPre + 'getResult', {params: {id: this.$route.params.id}}).then((res) => {
        console.log('result res', res);
        // this.imgUrl = res.data.data;
        // this.result = res.data.num;
        this.vesselImg = res.data.vessel;
        this.massvesselImg = res.data.massvessel;
        this.isdr = res.data.isdr;
        this.origin = res.data.origin;
        this.masNum = res.data.masNum;
        this.odlocation = res.data.odlocation;
      }).catch((err) => {
        console.log('result err', err);
      })

      axios.get(apiPre + 'getId', {params: {userId: this.$route.params.userId}}).then((res) => {
        // console.log('get id', res.data);
        this.userId = res.data.data.userId;
        this.userName = res.data.data.userName;

      }).catch((err) => {
        console.log('id err', err);
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "./detail";

  .detail_container {
    margin: 0 10%;
  }

  .detail_basic_info {
    border-bottom: 1px solid rgb(209, 209, 209);
  }

  .detail_item {
    /*display: flex;*/
    /*justify-content: space-between;*/
    margin-bottom: 5px;
    .item_info {
      display: inline-block;
      width: 33%;
    }
  }

  .detail_basic {
    font-size: 20px;
    margin: 10px 0;
  }

  .detail_img {
    text-align: center;
  }

  .detail_img_result {
    display: flex;
    /*border-bottom: 1px dashed rgb(209, 209, 209);*/
    margin-bottom: 20px;
    img {
      border: 1px solid rgb(209, 209, 209);
      width: 400px;
      height: 400px;
    }
  }

  .detail_img_info {
    /*margin-left: 20px;*/
    width: 70%;
    margin-bottom: 20px;
  }

  .detail_img_feature {
    font-size: 18px;
    font-weight: 300;
  }

  .detail_img_item {
    display: flex;
    border-bottom: 1px solid rgb(217, 218, 220);
    span {
      display: inline-block;
      width: 50%;
    }
    .two {
      text-align: center;
      border-right: 1px solid rgb(217, 218, 220);
    }
    .one {
      border-right: 1px solid rgb(217, 218, 220);
      padding-left: 5px;
      &:last-child {
        border-right: none;
      }
    }
  }

  .detail_item_container {
    border: 1px solid rgb(209, 209, 209);
    .title {
      background-color: rgb(145, 144, 155);
      padding-left: 5px;
    }
  }

  .detail_images {
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgb(209, 209, 209);
    span {
      border: 1px solid rgb(209, 209, 209);
      width: 50%;
      text-align: center;
      img {
        width: 100%;
        /*height: 500px;*/
      }
    }
  }

  .detail_conclusion {
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgb(209, 209, 209);
    font-size: 20px;
  }
</style>
